<!--  盛付通  -->
<template>
  <CommonsPage ref="commonsPageRef" showStyle="block">
    <template #step5Item>
      <a-card class="jeepay-m-card-step" style="margin-left:25px; margin-right: 25px">
        <template #title>
          分账产品
        </template>
        <a-form-item style="margin-top:20px" label="签约分账产品">
          <a-checkbox style="margin-top:5px; margin-left:10px" :disabled="isView" :checked="applymentDetailInfo.isDivision == 1 " @change="(e : any) => applymentDetailInfo.isDivision = e.target.checked ? 1 : 0 ">开通分账</a-checkbox>
          <!-- 预览模式 || 不是运营平台（其他系统）： 不可更改分账费率， 使用默认值 -->
          <a-input-number
            v-if="applymentDetailInfo.isDivision == 1"
            v-model:value="vdata.divisionFeeRate"
            :disabled="isView || configMode != 'mgrApplyment'"
            :precision="2"
            :min="0"
            :max="100"
          >
            <template #addonBefore>分账费率</template>
            <template #addonAfter>%</template>
          </a-input-number>
        </a-form-item>
      </a-card>

      <a-card v-if="checkHasPosPayway()" style="margin-left:25px; margin-top: 30px;">
        <template #title>
          POS产品开通 <a-button class="jeepay-m-btn" data-type="text" style="margin-left:35px" size="small" type="primary" @click="addPosFunc"><plus-outlined />添加【POS终端】</a-button>
        </template>
        
        <a-card class="jeepay-card-shengfu" v-for="(item, i) in vdata.posList" :key="i" style="margin:35px;">
          <template #title>
            <div style="display:flex;justify-content: space-between;">
              <span>POS终端[{{ i+1 }}]</span>
              <a-button class="jeepay-m-btn" data-type="text" size="small" type="danger" @click="delPosFunc(i)"><delete-outlined />删除</a-button>
            </div>
          </template>

          <a-form
            :ref="`posFormRef_${i}`"
            style="margin-top: 20px;"
            :model="item"
            :label-col="{ span: 4 }"
            :wrapper-col="{ span: 8 }"
            :rules="posFormRule"
          >
            <a-form-item style="margin-top:20px" label="POS安装地址" name="terminalCityId">
              <JeepayAreaSelect v-model:value="item.terminalCityId" :disabled="isView" />
            </a-form-item>
            <a-form-item style="margin-top:20px" label="具体位置" name="terminalDetailAddress">
              <a-input v-model:value.trim="item.terminalDetailAddress" :readonly="isView" />
            </a-form-item>
            <a-form-item style="margin-top:20px" label="小票名称" name="ticketName">
              <a-input v-model:value.trim="item.ticketName" :readonly="isView" />
            </a-form-item>
            <a-form-item style="margin-top:20px" label="终端数量" name="terminalCount">
              <a-input-number style="width: 100%" v-model:value="item.terminalCount" :min="1" :max="5" :precision="0" :readonly="isView" />
            </a-form-item>
          </a-form>
        </a-card>
      </a-card>
    </template>
  </CommonsPage>
</template>
<script setup lang="ts">

import {ref, reactive, defineExpose, inject, getCurrentInstance} from 'vue'
import CommonsPage from '../../commons/Commons.vue'
import ruleGenerator from '@/utils/ruleGenerator'


const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

let commonsPageRef = ref()

const posFormRule = {
  terminalCityId: [ ruleGenerator.requiredSelect('地址', 'array') ],
  terminalDetailAddress: [ ruleGenerator.requiredInput('具体位置') ],
  ticketName: [ ruleGenerator.requiredInput('小票名称') ],
  terminalCount: [ ruleGenerator.requiredInput('终端数量', 'number') ],
}


const vdata : any = reactive({
  divisionFeeRate: 0.1,
  posList: [], // 开通pos终端产品信息 
})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 解析pos终端 
if(applymentDetailInfo && applymentDetailInfo.posListStr){
  vdata.posList = JSON.parse(applymentDetailInfo.posListStr)
}

// 注入： 是否预览模式
let isView : any = inject('isView')

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 初始化内容
if(typeof applymentDetailInfo.divisionFeeRate == 'number'){
  vdata.divisionFeeRate = Number.parseFloat((applymentDetailInfo.divisionFeeRate * 100).toFixed(2))
}

// 进件模式， 默认开通分账产品。 
if(configMode == 'mgrApplyment'){
  // 默认开通分账
  if(!mchApplymentData.applyId && typeof applymentDetailInfo.isDivision == 'undefined'){
    applymentDetailInfo.isDivision = 1
  }
}


// 点击【智能读取】后的回调事件
function mergeApplyDetailInfosCallback(){
  return commonsPageRef.value.mergeApplyDetailInfosCallback() //直接调用公共组件的函数
}

// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){


  if(typeof vdata.divisionFeeRate != 'number'){
    $infoBox.message.error('请输入分账费率')
    return Promise.reject()
  }

  // 验证pos 
  return validatePos(0).then((res) => {

    // 设置费率
    applymentDetailInfo.divisionFeeRate = Number.parseFloat((vdata.divisionFeeRate / 100).toFixed(4))

    applymentDetailInfo.posListStr = res // pos开通数据

    //直接调用公共组件的函数
    return commonsPageRef.value.saveDataPreCallback(isTemp)
    
  })


}

// 新增pos终端设备
function addPosFunc(){

  if(getAllTerminalCount() >= 5){
    $infoBox.message.error('pos终端设备数量不得高于5个')
    return false
  }

  vdata.posList.push({})
}

// del 
function delPosFunc(i){
  vdata.posList.splice(i, 1)
}

// 验证pos是否合法
function validatePos(i){

  if(!checkHasPosPayway()){ // 不包含pos产品
    return Promise.resolve()
  }

  // pos必填
  if(vdata.posList <= 0){
    $infoBox.message.error('请新增pos终端设备')
    return Promise.reject()
  }

  if(getAllTerminalCount() > 5){
    $infoBox.message.error('pos终端设备数量不得高于5个')
    return Promise.reject()
  }

  // 全部校验完成
  if(i >= vdata.posList.length){
    return JSON.stringify(vdata.posList)
  }

  let refName = `posFormRef_${i}`
  let componentIns = Array.isArray(proxy.$refs[refName]) ? proxy.$refs[refName][0] : proxy.$refs[refName]

  return componentIns.validate().then( () => {
        i++
        return validatePos(i)
 })
}

// 判断是否显示pos产品
function checkHasPosPayway(){

  if(!commonsPageRef.value){
    return false
  }
  return commonsPageRef.value.hasApplymentWaycode('AUTO_POS')
}


// 获取到数量
function getAllTerminalCount(){

  if(!vdata.posList){
    return 0
  }

  let result = 0
  for (let index = 0; index < vdata.posList.length; index++) {
    const element = vdata.posList[index]
    result = result + ( element.terminalCount || 0)
  }

  return result
}


defineExpose({ mergeApplyDetailInfosCallback, saveDataPreCallback })
</script>

